<template>
  <div class="todo">
    <h3>添加小目标</h3>
    <input type="text" v-model="data.input" placeholder="输入小目标，按回车确认" @keyup.enter="add" class="inp">
    <p>共有<span>{{ data.list.length }}</span>,已完成<span></span>,还有<span></span>条未完成</p>
    <input type="radio" name="1">所有目标
    <input type="radio" name="1">已完成目标
    <input type="radio" name="1">未完成目标
    <!-- 全部 -->
    <div class="item" v-for="item,i in data.list" :key="item.id">
     <p> <input type="checkbox"  v-model="data.status"><span>{{ item.name }}</span> <span class="del" @click="del(i)">删除</span></p>
    </div>
  </div>
</template>

<script  setup>
import {ref, reactive, toRefs} from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const store = useStore()
const data=reactive({
  input:"",
  status:false,
  list:[],
})
// 回车添加
const add=()=>{
  let obj={
    id:new Date().getTime(),
    name:data.input,
    status:data.status
  }
  data.list.push(obj)
  data.input=""
}
// 删除
const del=(i)=>{
  data.list.splice(i,1)
}

</script>

<style scoped lang='scss'>
.todo{
  width: 1000px;
  margin: auto;
  .inp{
    width: 100%;
    height: 30px;
  }
  .item{
    margin-top: 20px;
    width: 100%;
  p{
    width: 100%;
    .del{
      float: right;
    }
  }
  }
}
</style>